<template>
  <div id="footerbox">
    <div class="footerlist">
      <div class="itemhead"><span class="itemhead">技术框架</span></div>
      <footeritem href="https://vuejs.org/"
        ><span slot="text">Vue.js</span></footeritem
      >
      <footeritem href="https://react.docschina.org/"
        ><span slot="text">React.js</span></footeritem
      >
      <footeritem href="https://www.electronjs.org/"
        ><span slot="text">Electron</span></footeritem
      >
      <footeritem href="http://www.axios-js.com/"
        ><span slot="text">Axios</span></footeritem
      >
      <footeritem href="https://flutter.dev/"
        ><span slot="text">Flutter</span></footeritem
      >
      <footeritem href="https://reactnative.cn/"
        ><span slot="text">React Native</span></footeritem
      >
      <footeritem href="https://element.eleme.io/#/zh-CN"
        ><span slot="text">Element UI</span></footeritem
      >
      <footeritem href="https://vuetifyjs.com/"
        ><span slot="text">Vuetify</span></footeritem
      >
      <footeritem href="https://uniapp.dcloud.io/"
        ><span slot="text">Uni-app</span></footeritem
      >
      <footeritem href="https://nodejs.org/zh-cn/"
        ><span slot="text">Node.js</span></footeritem
      >
      <footeritem href="https://golang.google.cn/"
        ><span slot="text">Golang</span></footeritem
      >
      <footeritem href="https://www.djangoproject.com/"
        ><span slot="text">Django</span></footeritem
      >
    </div>

    <div class="footerlist">
      <div class="itemhead"><span class="itemhead">代码云仓</span></div>
      <footeritem href="https://github.com/"
        ><span slot="text">Github</span></footeritem
      >
      <footeritem href="https://gitee.com/"
        ><span slot="text">Gitee(码云)</span></footeritem
      >
    </div>

    <div class="footerlist">
      <div class="itemhead"><span class="itemhead">资源图库</span></div>
      <footeritem href="https://www.iconfont.cn/"
        ><span slot="text">阿里巴巴矢量图标库</span></footeritem
      >
      <footeritem href="https://icomoon.io/"
        ><span slot="text">IcoMoon</span></footeritem
      >
      <footeritem href="https://www.glazestock.com/"
        ><span slot="text">Glaze</span></footeritem
      >
      <footeritem href="https://pngtree.com/"
        ><span slot="text">PngText</span></footeritem
      >
      <footeritem href="https://iradesign.io/"
        ><span slot="text">IreDesign</span></footeritem
      >
    </div>

    <div class="footerlist">
      <div class="itemhead"><span class="itemhead">论坛或视频</span></div>
      <footeritem href="https://www.bilibili.com/"
        ><span slot="text">BiliBili(B站)</span></footeritem
      >
      <footeritem href="https://www.zhihu.com/signin?next=%2F"
        ><span slot="text">知乎</span></footeritem
      >
      <footeritem href="https://github.com"
        ><span slot="text">Github</span></footeritem
      >
      <footeritem href="https://juejin.cn/"
        ><span slot="text">掘金</span></footeritem
      >
      <footeritem href="https://stackoverflow.com/"
        ><span slot="text">Stack Overflow</span></footeritem
      >
      <footeritem href="https://www.cnblogs.com/"
        ><span slot="text">博客园</span></footeritem
      >
      <footeritem href="https://www.runoob.com/"
        ><span slot="text">菜鸟教程</span></footeritem
      >
      <footeritem href="https://leetcode-cn.com/"
        ><span slot="text">力扣(算法练习)</span></footeritem
      >
    </div>
  </div>
</template>

<script>
import Footeritem from "./footeritem/footeritem.vue";
export default {
  name: "footerbox",
  components: {
    Footeritem,
  },
};
</script>

<style scoped>
#footerbox {
  flex: 6;
  padding-top: 160px;
  padding-left: 50px;
  height: 60%;
  overflow: hidden;
  display: flex;
}
.footerlist {
  flex: 1;
  height: 100%;
}
.itemhead {
  font-size: 0.8rem;
  color: #6b737c;
  margin-bottom: 15px;
  letter-spacing: 0px;
}
</style>